<template>
  <div class="city_container">
<!--    搜索组件-->
    <search-com
      :searchMethod="searchMethod"
      :query="query"
      :crumbValue = "crumbValue"
      :placeholderValue = "'请输入搜索的位置名称'"
      @putSearchList="getSearchList"/>
<!--    面包屑历史记录组件-->
    <crumbs-history-com v-if="!placelist.length"
      :historyListName = "'positionHistory'"
      @putHistoryValue="getHistoryValue"/>
<!--    shop结果列表-->
    <ul class="getpois_ul" >
      <li v-for="(item, index) in placelist" @click='nextPage(item.geohash)' :key="index" class="placeList">
        <div class="placeListItem">
          <p class="pois_name">{{item.name}}</p>
          <p class="pois_address">{{item.address}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import {IPlace} from "@/api/config/responseType";
import {searchMethods, searchPlaceQuery} from "@/utils/utilsType";
import {toNumber} from "lodash";
import {Mutation} from "vuex-class";
const namespace = "profile"
@Component({})
export default class searchPositionCom extends Vue {
  private query !:searchPlaceQuery; //传给search的query参数
  private searchMethod = "searchPlaceQuery" as searchMethods; //提供给search组件当前组件的说明
  private crumbValue = '' as string;  //面包屑的值
  private placelist:IPlace[] = [] // 搜索城市列表的结果
  @Mutation('SAVE_GEOHASH', { namespace }) SETGEOHASH: any  //如果Vuex中没有，则获取一个新的并交给仓库
  beforeMount(){
    this.initQuery()
  }
/**
 * @description: 初始化query参数
 * @return {void}
 */
  initQuery(){
    this.query = {
      keyword : '',
      city_id :toNumber(this.$route.params.cityid),
      type : 'search',
    }
  }
/**
 * @description: 从search组件传出的数据，在这里进行赋值
 * @return {void}
 * @param placeList
 */
   private getSearchList(placeList: IPlace[]){
     this.placelist = placeList;
   }
/**
* @description: 面包屑的回调函数，获得面包屑的值
* @return {void}
* @param value
*/
  private getHistoryValue(value:string){
    this.crumbValue = value;
  }
/**
  * @description: 点击列表，跳转到下一个页面
  * @return {void}
  * @param geohash
  */
  private nextPage(geohash:string){
    this.SETGEOHASH(geohash);
    this.$router.push({path:'/home'});
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
}
ul , ol {
  list-style: none;
}
.city_container{
  .getpois_ul{
    .placeList {
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      .placeListItem {
        margin: 20px 10px;
        padding: 10px 10px;
        .pois_name{
          color: #333333;
          margin: 6px 0 3px 0;
          padding: 6px 0 0 0;
        }
        .pois_address {
          color: #999999;
          margin:  6px 0 3px 0;
          padding: 0 0 6px 0;
        }
      }
    }
  }
}
</style>
